<template>
  <div class="apiTrade">
    <div class="content centerMargin">
      <!-- banner -->
      <div class="bannerBack">
        <div class="top"></div>
        <div class="banner">
          <p>{{ $t('apiTrade.newDexCompetition') }}</p>
          <p>{{ $t('apiTrade.firstTradingCompetition') }}</p>
          <div class="jackpotTop flex">
            <div class="flex1">
              <div>{{ $t('apiTrade.pricePool') }}</div>
              <div>{{ competitionInfo.prizePool || '--' }}</div>
            </div>
            <div class="flex1">
              <div>{{ $t('apiTrade.accountQuantity') }}</div>
              <div>{{ competitionInfo.totalAccountCount || '--' }}</div>
            </div>
            <div class="flex1">
              <div>{{ $t('apiTrade.totalTradingVolume') }}</div>
              <div v-if="countdownTip === 0">--</div>
              <div v-else>{{ competitionInfo.totalDealAmt || '--' }}</div>
            </div>
            <!-- <div class="flex1">
              <div>{{ $t('apiTrade.grossRate') }}</div>
              <div v-if="countdownTip === 0">--</div>
              <div v-else>{{ competitionInfo.totalProfitRate || '--' }}</div>
            </div> -->
            <div class="flex1">
              <div>{{ $t('apiTrade.apiTimes') }}</div>
              <div v-if="countdownTip === 0">--</div>
              <div v-else>{{ competitionInfo.totalApiOrderCount || '--' }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 地图 -->
      <div class="map">
        <div class="mapCont">
          <img src="@/assets/img/activity/apiTrade/map.gif" alt="">
        </div>
      </div>
      <!-- 奖池情况和倒计时 -->
      <div class="bigBack">
        <div class="bottom"></div>
        <div class="jackpotBack">
          <div class="jackpot">
            <div class="jackpotBottom">
              <p style="margin-bottom: 20px;" v-if="countdownTip === 0">{{ $t('apiTrade.competitionStart') }}</p>
              <p style="margin-bottom: 20px;" v-else-if="countdownTip === 1">{{ $t('apiTrade.competitionEnd') }}</p>
              <p style="margin-bottom: 20px;" v-else-if="countdownTip === 2">{{ $t('apiTrade.competitionOver') }}</p>
              <div v-if="countdownTip === 0 || countdownTip === 1">
                <span class="colorSky">{{cDate.days}}</span>
                <span>{{ $t('apiTrade.competitionDay') }}</span>
                <span class="colorSky">{{cDate.hours}}</span>
                <span>{{ $t('apiTrade.competitionHours') }}</span>
                <span class="colorSky">{{cDate.minutes}}</span>
                <span>{{ $t('apiTrade.competitionMinutes') }}</span>
                <span class="colorSky">{{cDate.seconds}}</span>
                <span>{{ $t('apiTrade.competitionMis') }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 大赛排行榜 -->
        <div class="tradeListBack" id="list">
          <div class="tradeList">
            <div class="tradeListTitle flexc">
              <span>{{ $t('apiTrade.competitionRankList') }}</span>
            </div>
            <div class="tradeListWrap">
              <div class="tradeListCont">
                <ul class="tradeListCaption flex">
                  <li>{{ $t('apiTrade.worldRanking') }}</li>
                  <li>{{ $t('apiTrade.competitionAccount') }}</li>
                  <li>{{ $t('apiTrade.accumulatedIncome') }}(EOS)</li>
                  <li style="cursor: pointer;">
                    <span>{{ $t('apiTrade.supportHim') }}</span>
                    <el-tooltip class="item" effect="dark" :content="$t('apiTrade.supportTip')" placement="top" popper-class="darkIcon">
                      <i class="iconfont icon-huaban"></i>
                    </el-tooltip>
                  </li>
                  <li>&nbsp;</li>
                </ul>
                <div class="apiList">
                  <ul class="list flex" v-for="(item, index) in competitionInfo.rankList" :key="index">
                    <!-- 排名 -->
                    <li v-if="item.rank === 1" class="flexc">
                      <img src="@/assets/img/activity/apiTrade/rank1.png" alt="">
                    </li>
                    <li v-else-if="item.rank === 2" class="flexc">
                      <img src="@/assets/img/activity/apiTrade/rank2.png" alt="">
                    </li>
                    <li v-else-if="item.rank === 3" class="flexc">
                      <img src="@/assets/img/activity/apiTrade/rank3.png" alt="">
                    </li>
                    <li v-else>{{ item.rank || '--'}}</li>
                    <!-- 账号 -->
                    <li>
                      {{ item.accountNo || '--'}}
                      <template v-if="item.totalProfit !== null">
                        <i class="iconfont icon-shangsheng colorGreen" v-if="!item.lastRank || item.rank - item.lastRank < 0"></i>
                        <i class="iconfont icon-xiajia colorRed" v-else-if="item.rank - item.lastRank > 0"></i>
                      </template>
                    </li>
                    <!-- 累计收益 -->
                    <li v-if="item.totalProfit && item.totalProfit !== null">{{ item.totalProfit.toFixed(4)}}</li>
                    <li v-else-if="item.totalProfit === 0">{{ item.totalProfit.toFixed(4)}}</li>
                    <li v-else>--</li>
                    <li>{{ item.boosterCount || '--'}}</li>
                    <li class="flexc assist" v-if="countdownTip === 1">
                      <span class="supported" v-if="competitionInfo.boostRankId === item.id">{{ $t('apiTrade.supported') }}</span>
                      <span v-else @click="handleToAssistanceAuthorized(item.id)">{{ $t('apiTrade.support') }}</span>
                    </li>
                    <li v-else class="flexc assist">
                      <span class="supported">{{ $t('apiTrade.support') }}</span>
                    </li>
                  </ul>
                </div>
                <p>{{ $t('apiTrade.updateRankList') }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 大赛奖池 -->
      <div class="supportBack">
        <div class="support">
          <div class="supportTitle">
            <div class="flexc">
              <span>{{ $t('apiTrade.pricePool') }}</span>
            </div>
          </div>
          <div class="supportCont">
            <p class="default">{{ $t('apiTrade.sortList') }}</p>
            <div class="shadowCont">
              <div class="supportCaption">
                <ul class="flex">
                  <li>{{ $t('apiTrade.individualOfPrizePool') }}</li>
                  <li>{{ $t('apiTrade.sponsorDetails') }}</li>
                </ul>
              </div>
              <div class="supportList">
                <ul class="flex" v-for="(item, index) in sponsorList" :key="index">
                  <li class="flex">
                    <div class="icon">
                      <img :src="item.logoUrl" />
                    </div>
                    <span class="name">{{ item.name }}</span>
                  </li>
                  <li>{{ item.sponsorAmount }}</li>
                </ul>
              </div>
              <div class="supportBtn">
                <p>{{ $t('apiTrade.adding') }}</p>
                <div class="flexc">
                  <span @click="serviceHidden = true">{{ $t('apiTrade.contactSponsor') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 大赛交易对 -->
      <div class="tradePairsBack">
        <div class="tradePairs">
          <div class="tradePairsTitle flexc">
            <span>{{ $t('apiTrade.tradingPair') }}</span>
          </div>
          <div class="tradePairsCont">
            <ul class="clearfix">
              <li class="fl" v-for="(item, index) in symbolList" :key="index">
                <div class="backBorder">
                  <div class="flexb">
                    <div class="symbol flexc">
                      <img class="symbolIcon" :src="item.logoUrl" />
                      <span>{{ item.symbol.split('-')[1].toUpperCase() }} / {{ item.symbol.split('-')[2].toUpperCase() }}</span>
                    </div>
                    <div class="cje" v-if="countdownTip === 1">
                      {{ $t('apiTrade.accumulatedTradingVolume') }}{{ item.totalDealAmt !== null && `${item.totalDealAmt}EOS` || '--' }}
                    </div>
                  </div>
                  <div class="flexb symbolWord">
                    <p class="fn-text2" style="-webkit-box-orient: vertical;">{{ item.introduction }}</p>
                    <span @click="handleToTrade(item.symbol)">{{ $t('apiTrade.tradeNow') }}</span>
                  </div>
                </div>
              </li>
            </ul>
            <div class="tradeBtn">
              <p class="center">{{ $t('apiTrade.transactionPairs') }}</p>
              <div class="flexc">
                <span @click="handleApplyArticle">{{ $t('apiTrade.applyNow') }}</span>
              </div>
              <p style="text-align: left;font-size: 14px; margin-bottom: 0;" v-if="countdownTip === 1">{{ $t('apiTrade.tradeTotal') }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 大赛流程 -->
      <div class="tradeProcessBack">
        <div class="tradeProcess">
          <div class="tradeProcessTitle flexc">
            <span>{{ $t('apiTrade.activityProcedure') }}</span>
          </div>
          <div class="tradeProcessCont">
            <!-- 参与大赛 -->
            <div class="matchSignUp">
              <p class="date">2019.05.24</p>
              <p class="title1">{{ $t('apiTrade.joinCompetition') }}</p>
              <div class="main">
                <div class="flexb">
                  <div class="mainLeft">
                    <span>{{ $t('apiTrade.applyAPI_KEY') }}</span>
                    <span>{{ $t('apiTrade.getAPI_KEY') }}</span>
                  </div>
                  <a href="https://github.com/newdex/api-docs" target="_blank">{{ $t('apiTrade.applyNow') }}</a>
                </div>
              </div>
            </div>
            <!-- 项目报名 -->
            <div class="projectSignUp">
              <p class="title1">{{ $t('apiTrade.signUp') }}</p>
              <div class="main">
                <div class="flexb mbd">
                  <div class="mainLeft">
                    <span>{{ $t('apiTrade.tradeSignUp') }}</span>
                    <span>{{ $t('apiTrade.addAssistant1') }}</span>
                  </div>
                  <div class="mainRight" @click="handleApplyArticle">{{ $t('apiTrade.signUpNow') }}</div>
                </div>
                <div class="flexb mbd">
                  <div class="mainLeft">
                    <span>{{ $t('apiTrade.sponsorProject') }}</span>
                    <span>{{ $t('apiTrade.addAssistant2') }}</span>
                  </div>
                  <div class="mainRight" @click="serviceHidden = true">{{ $t('apiTrade.contactSponsor') }}</div>
                </div>
                <div class="flexb">
                  <div class="mainLeft">
                    <span>{{ $t('apiTrade.mediaSignUp') }}</span>
                    <span>{{ $t('apiTrade.addAssistant3') }}</span>
                  </div>
                  <div class="mainRight" @click="mediaHidden = true">{{ $t('apiTrade.signUpNow') }}</div>
                </div>
              </div>
            </div>
            <!-- 助力分大奖 -->
            <div class="matchStart">
              <p class="date">2019.05.31</p>
              <p class="title1">{{ $t('apiTrade.bigActivity') }}</p>
              <div class="main">
                <div class="flexb mbd">
                  <div class="mainLeft">
                    <span>{{ $t('apiTrade.supportDivideReward') }}</span>
                    <span>{{ $t('apiTrade.supportPartDivideReward') }}</span>
                  </div>
                  <a href="#list">{{ $t('apiTrade.sponsorNow') }}</a>
                </div>
                <div class="flexb">
                  <div class="mainLeft">
                    <span>{{ $t('apiTrade.getReward') }}</span>
                    <span>{{ $t('apiTrade.articleThumbsUp') }}</span>
                  </div>
                  <div class="mainRight" @click="handleToMedia">{{ $t('apiTrade.viewNow') }}</div>
                </div>
              </div>
            </div>
            <!-- 大赛结束 -->
            <div class="matchEnd">
              <p class="date">2019.06.07</p>
              <p class="title1">{{ $t('apiTrade.over') }}</p>
              <div class="main">
                <div class="flexb">
                  <div class="mainLeft">
                    <span>{{ $t('apiTrade.releaseReward') }}</span>
                    <span>{{ $t('apiTrade.releaseRewardAfter') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 大赛详情 -->
        <div class="tradeProcess">
          <div class="tradeProcessTitle flexc">
            <span>{{ $t('apiTrade.bigDetail') }}</span>
          </div>
          <div class="rulesCont">
            <pre v-html="eventInfo.introduction"></pre>
          </div>
        </div>
      </div>
      <div class="bottomBack">
        <!-- 邀请生成海报 -->
        <div class="shareBack">
          <div class="share">
            <div class="shareTitle">
              <p class="center">{{ $t('apiTrade.competitionSharing1') }}</p>
              <p class="center">{{ $t('apiTrade.competitionSharing2') }}</p>
            </div>
            <div class="shareCont">
              <p class="copyUrl fn-text1">{{ $t('apiTrade.copyUrl') }}</p>
              <div class="shareBtn flexc">
                <span v-clipboard:copy="$t('apiTrade.copyUrl')"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError">{{ $t('apiTrade.copyLink') }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 合作伙伴 -->
        <div class="partnerBack">
          <div class="partner">
            <!-- 主办方 -->
            <div class="partnerTop">
              <div class="partnerTitle flexc">
                <span>{{ $t('apiTrade.organizer') }}</span>
              </div>
              <div class="partnerCont flexc">
                <div>
                  <img src="@/assets/img/activity/apiTrade/zhuban.png" alt="">
                </div>
              </div>
            </div>
            <!-- 战略合作伙伴 -->
            <div class="partnerCenter">
              <div class="partnerTitle flexc">
                <span>{{ $t('apiTrade.organizer1') }}</span>
              </div>
              <div class="partnerCont clearfix">
                <div class="fl" v-for="(item, index) in strategyPartnerList" :key="index">
                  <a :href="item.linkUrl" target="_blank">
                    <img :src="item.logoUrl" alt="">
                  </a>
                </div>
              </div>
            </div>
            <!-- 数据服务商 -->
            <div class="partnerTop">
              <div class="partnerTitle flexc">
                <span>{{ $t('apiTrade.dataServer') }}</span>
              </div>
              <div class="partnerCont flexc">
                <a href="https://www.aicoin.net.cn/" target="_blank">
                  <img src="@/assets/img/activity/apiTrade/aiCoin.png" alt="">
                </a>
              </div>
            </div>
            <!-- 合作伙伴 -->
            <div class="partnerBottom">
              <div class="partnerTitle flexc">
                <span>{{ $t('apiTrade.cooperativePartner') }}</span>
              </div>
              <div class="partnerCont clearfix">
                <div class="fl" v-for="(item, index) in partnerList" :key="index">
                  <a :href="item.linkUrl" target="_blank">
                    <img :src="item.logoUrl" alt="">
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 媒体咨询弹窗 -->
      <div class="mediaPop service" v-if="mediaHidden">
        <div class="mediaPopCont">
          <div class="closeBtn iconfont el-icon-close" @click="mediaHidden = false"></div>
          <div class="mediaPopTitle center">{{ $t('apiTrade.addSupport') }}</div>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top" class="clearfix">
            <!-- 媒体名称 -->
            <el-form-item :label="$t('apiTrade.mediaName')" prop="media" class="formLine">
              <el-input v-model.trim="form.media" maxlength="255" clearable></el-input>
            </el-form-item>
            <!-- 联系方式 -->
            <el-form-item :label="$t('apiTrade.contactInfo')" class="contact formLine" prop="contact">
              <el-input v-model.trim="form.contact"  maxlength="255" clearable></el-input>
            </el-form-item>
            <!-- 媒体logo -->
            <el-form-item :label="$t('apiTrade.mediaLogo')">
              <el-upload
                class="avatar-uploader"
                action="111"
                :show-file-list="false"
                :auto-upload="false"
                :on-success="handleAvatarSuccess"
                :on-change="onchange"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.logo" :src="form.logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button class="submitFormCont" type="primary" @click="handleApplyAction">{{ $t('activity.submit') }}</el-button>
          </div>
          <div class="cont1 flex">
            <div class="type1">
              <span>{{ $t('apiTrade.contact1') }}</span>
              <span>{{ $t('apiTrade.contact1Cont') }}</span>
            </div>
            <div class="submitWordOrder">
              <a :href="jumpWordOrder[$store.state.app.language]" target="_blank">{{ $t('footer.form') }}</a>
            </div>
          </div>
          <div class="cont1 flex">
            <div class="type1">
              <span>{{ $t('apiTrade.contact2') }}</span>
              <span>{{ $t('apiTrade.contact2Cont') }}</span>
            </div>
            <div class="email">{{ $t('apiTrade.officialMailbox') }} support@newdex.zendesk.com</div>
          </div>
          <div class="getSome" :class="{'enClass': $store.state.app.language === 'en'}">
            <p>{{ $t('apiTrade.mediaCanGet') }}</p>
            <ul class="clearfix">
              <li>{{ $t('apiTrade.mediaCanGet1') }}</li>
              <li>{{ $t('apiTrade.mediaCanGet2') }}</li>
              <li>{{ $t('apiTrade.mediaCanGet3') }}</li>
              <li>{{ $t('apiTrade.mediaCanGet4') }}</li>
              <li>{{ $t('apiTrade.mediaCanGet5') }}</li>
            </ul>
          </div>
          <!-- <div class="flexb join">
            <span>{{ $t('apiTrade.rewardAreaArticle') }}</span>
            <span>{{ $t('apiTrade.joinNow') }}</span>
          </div> -->
        </div>
      </div>
      <!-- 赞助咨询弹窗 -->
      <div class="mediaPop" v-if="serviceHidden">
        <div class="mediaPopCont">
          <div class="closeBtn iconfont el-icon-close" @click="serviceHidden = false"></div>
          <div class="mediaPopTitle center">{{ $t('apiTrade.callContact') }}</div>
          <div class="cont1 flex">
            <div class="type1">
              <span>{{ $t('apiTrade.contact1') }}</span>
              <span>{{ $t('apiTrade.contact1Cont') }}</span>
            </div>
            <div class="submitWordOrder">
              <a :href="jumpWordOrder[$store.state.app.language]" target="_blank">{{ $t('footer.form') }}</a>
            </div>
          </div>
          <div class="cont1 flex">
            <div class="type1">
              <span>{{ $t('apiTrade.contact2') }}</span>
              <span>{{ $t('apiTrade.contact2Cont') }}</span>
            </div>
            <div class="email">{{ $t('apiTrade.officialMailbox') }} support@newdex.zendesk.com</div>
          </div>
          <div class="getSome" :class="{'enClass': $store.state.app.language === 'en'}">
            <p>{{ $t('apiTrade.sponsorshipCanGet') }}</p>
            <ul class="clearfix">
              <li>{{ $t('apiTrade.sponsorshipCanGet1') }}</li>
              <li>{{ $t('apiTrade.sponsorshipCanGet2') }}</li>
              <li>{{ $t('apiTrade.sponsorshipCanGet3') }}</li>
              <li>{{ $t('apiTrade.sponsorshipCanGet4') }}</li>
              <li>{{ $t('apiTrade.sponsorshipCanGet5') }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <a href="" class="hidden" target="_blank" ref="target"></a>
  </div>
</template>

<script>
import { countdown, authorized } from '@/utils/validate';

export default {
  name: 'apiTrade', // api量化交易
  data() {
    return {
      countdownTip: 0, // 倒计时状态 0-预热 1-进行中 2-已结束
      hiddenVissible: false, // 预热隐藏
      totalList: [], // 总列表
      eventInfo: {}, // api交易信息
      articleList: [], // 文章列表
      partnerList: [], // 合作伙伴列表
      strategyPartnerList: [], // 战略合作伙伴
      sponsorList: [], // 赞助列表
      symbolList: [], // 交易对列表
      serviceHidden: false, // 赞助咨询弹窗
      mediaHidden: false, // 媒体咨询弹窗
      countdownTimer: false, // 比赛倒计时
      endtime: null,
      cDate: { // 比赛倒计时
        days: 0,
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      competitionInfo: {}, // 大赛奖池信息
      jumpWordOrder: {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/requests/new',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/requests/new',
        en: 'https://newdex.zendesk.com/hc/en-us/requests/new',
        ko: 'https://newdex.zendesk.com/hc/ko/requests/new'
      }, // 提交工单地址
      // 表单提交
      form: {
        media: '', // 媒体名称
        logo: '', // 媒体logo
        contact: '', // 联系方式
      },
      rules: {
        media: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        logo: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        contact: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
      },
    };
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.language': function change() {
      this.handleGetSymbol();
      this.rules = {
        media: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        logo: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        contact: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
      };
    },
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.handleCompetitionInfo();
      },
      deep: true,
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    this.handleGetSymbol();
    this.handleCompetitionInfo();
  },
  beforeDestroy() {
    if (this.countdownTimer) { // 结束倒计时
      clearInterval(this.countdownTimer);
    }
  },
  methods: {
    // 授权
    handleToAssistanceAuthorized(id) {
      // 判断有无登录
      const scat = this.$store.state.app.scatter;
      if (scat && !scat.identity) {
        this.handleWalletPermission();
        return;
      }

      // 判断所属链是否为eos
      const accountInfo = this.$store.state.app.accountInfo;
      if (accountInfo && accountInfo.chain !== 'eos') {
        this.$message.warning(this.$t('apiTrade.notEOSAccount'));
        return;
      }

      // 已助力过提示
      if (this.competitionInfo.boostRankId) {
        this.$message.warning(this.$t('apiTrade.oneTimeOnly'));
        return;
      }

      authorized(this, (code, res) => {
        if (code === 'error') { // 授权错误
          console.log(res); // eslint-disable-line
          return;
        }
        this.handleToAssistance(id);
      });
    },
    // 助力
    handleToAssistance(id) {
      const params = {
        id
      };
      this.$http.post('/exchangeCompetitionRank/boostRank', params).then((res) => {
        if (res.code === 1022) {
          this.$message.error(this.$t('apiTrade.supportPassed'));
          return;
        }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.$message.success(this.$t('apiTrade.supportSuccess'));
        this.handleCompetitionInfo();
      });
    },
    // 获取列表数据
    handleGetSymbol() {
      const params = {
        eventCode: 'api-trade'
      };
      this.$http.post('/event/info', params).then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        const introduction = res.eventInfo.introduction;
        this.totalList = res;
        this.eventInfo = res.eventInfo;
        this.articleList = res.articleList;
        this.partnerList = res.partnerList;
        this.sponsorList = res.sponsorList;
        this.strategyPartnerList = res.strategyPartnerList;
        this.symbolList = res.symbolList;
        this.eventInfo.introduction = decodeURI(introduction).replace(/&amp;nbsp;/g, ' ');
        this.endtime = res.eventInfo.beginTime;
        const beginTimeFormat = res.eventInfo.beginTime.replace(/-/g, '/');
        const endTimeFormat = res.eventInfo.endTime.replace(/-/g, '/');
        const beginTime = Date.parse(beginTimeFormat);
        const endTime = Date.parse(endTimeFormat);
        // 开始倒计时
        this.countdownTimer = setInterval(() => {
          const nowDate = Date.parse(new Date());
          if (nowDate - beginTime < 0) {
            this.endtime = beginTimeFormat;
            this.countdownTip = 0;
          } else if (nowDate - beginTime > 0 && nowDate - endTime < 0) {
            this.endtime = endTimeFormat;
            this.countdownTip = 1;
          } else {
            this.endtime = null;
            this.countdownTip = 2;
          }
          this.handleCountdown();
        }, 1000);
        // 开始倒计时
        // this.handleCountdownStart();
      });
    },
    // 获取交易大赛统计信息
    handleCompetitionInfo() {
      const params = {
        eventCode: 'api-trade'
      };
      this.$http.post('/exchangeCompetitionRank/getCompetitionInfo', params).then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.competitionInfo = res;
      });
      setTimeout(() => {
        this.handleCompetitionInfo();
      }, 60000);
    },
    // 提交媒体表单
    handleApplyAction() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const params = this.form;
          this.$http.post('/eventArticle/submit', params).then((res) => {
            if (res.code !== 0) {
              const msg = res.msg || 'System error'
              this.$message.error(msg);
              return;
            }
            // const applyType = this.form.type === 1 ? this.$t('candyBox.dataSuccess') : this.$t('candyBox.applySuccess');
            // 成功
            this.$alert(this.$t('candyBox.applySuccess'), {
              type: 'success',
              center: true,
              showConfirmButton: false,
              callback: () => {
                this.$refs.form.clearValidate();
                this.form.media = '';
                this.form.logo = '';
                this.form.contact = '';
              }
            })
          });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.logo = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload() {
    },
    // 当上传图片后，调用onchange方法，获取图片本地路径
    onchange() {
      const ev = event || window.event;
      const file = ev.target.files[0];
      const reader = new FileReader();
      const isLt = file.size / 1024 < 500;
      if (!isLt) {
        this.$message.error(this.$t('candyBox.notExceed'));
        return;
      }
      // 转base64
      reader.onload = (e) => {
        this.form.logo = e.target.result // 将图片路径赋值给src
      }
      reader.readAsDataURL(file);
    },
    // 交易对报名
    handleApplyArticle() {
      // 重新打开一个页面 - 申请页
      const target = this.$refs.target;
      const origin = window.location.origin
      target.setAttribute('href', `${origin}/apply?type=3`);
      target.click();
    },
    // 跳转到点赞页面
    handleToMedia() {
      this.$router.push({
        name: 'media'
      });
    },
    // 点击交易对跳转交易页面
    handleToTrade(symbol) {
      this.$router.push(`/trade/${symbol}`);
    },
    // 开始倒计时
    handleCountdownStart() {
      this.countdownTimer = setInterval(() => {
        this.handleCountdown()
      }, 1000);
    },
    // 比赛倒计时
    handleCountdown() {
      if (this.cDate.total <= 0) {
        clearInterval(this.countdownTimer);
        // 倒计时结束
        return;
      }
      this.cDate = countdown(this.endtime);
      // if (this.cDate.total > 0) {
      //   this.countdownTip
      // }
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
  }
};
</script>
<style lang="scss" scoped>
// .centerMargin {
//   width: 1260px;
//   margin: 0 auto;
// }

.colorRed {
  color: #FF1739 !important;
}

.colorGreen {
  color: #47B183 !important;
}

.apiTrade {
  color: #fff;
  min-height: 1000px;
  background: #090d0e;
  padding-bottom: 50px;
  margin-bottom: -2px;

  .bannerBack {
    position: relative;

    .top {
      position: absolute;
      bottom: -30px;
      left: 0;
      width: 100%;
      height: 210px;
      background: url('../../../assets/img/activity/apiTrade/top.png') center center no-repeat;
      background-size: 100% 100%;
    }

    .banner {
      width: 100%;
      height: 600px;
      background: url('../../../assets/img/activity/apiTrade/a.jpg') center center no-repeat;
      background-size: 100% 100%;
      padding-top: 110px;

      p {
        text-align: center;
      }

      p:nth-child(1) {
        font-size: 64px;
        margin-bottom: 44px;
      }

      p:nth-child(2) {
        font-size: 28px;
      }

      .jackpotTop {
        position: relative;
        z-index: 10;
        width: 1260px;
        margin: 140px auto 0;

        .flex1 {
          font-size: 28px;
          flex: 1;
          text-align: center;

          div:nth-child(1) {
            margin-bottom: 15px;
            color: #00f9f9;
          }
        }
      }
    }
  }

  .map {
    background: #000;

    .mapCont {
      width: 1260px;
      margin: 30px auto 0;
    }

    img {
      display: inline-block;
      width: 100%;
      vertical-align: middle;
    }
  }

  .jackpotBack {
    padding: 125px 0 0 0;
    position: relative;
    z-index: 1;

    .jackpot {
      width: 1260px;
      margin: 0 auto;

      .jackpotCenter {
        height: 300px;
        background: #fff;
      }

      .jackpotBottom {
        text-align: center;
        font-size: 42px;

        .colorSky {
          color: #00F9F9;
          margin: 0 10px;
        }
      }
    }
  }

  .bigBack {
    position: relative;
    background: url('../../../assets/img/activity/apiTrade/b.jpg') center center no-repeat;
    background-size: 100% 100%;

    .bottom {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 210px;
      background: url('../../../assets/img/activity/apiTrade/bottom.png') center center no-repeat;
      background-size: 100% 100%;
    }
  }

  .tradeListBack {
    .tradeList {
      margin: 160px auto 0;
      width: 1260px;
      padding-bottom: 100px;

      .tradeListTitle {
        font-size: 42px;
        color: #00f9f9;
        margin-bottom: 50px;
      }

      .tradeListWrap {
        width: 1081px;
        height: 1005px;
        margin: 0 auto;
        border: 2px solid #77F7FA;
        box-shadow: 0 0 9px 0 #77F7FA;
        border-radius: 15px;

        .tradeListCont {
          padding: 0 26px;

          .tradeListCaption {
            font-size: 21px;
            color: #fff;

            li {
              flex: 2;
              line-height: 83px;
              text-align: center;
            }

            li:nth-child(1) {
              flex: 1.3;
            }

            li:nth-child(2) {
              text-align: center;
              flex: 2.5;
            }

            li:nth-child(3) {
              padding-right: 50px;
              text-align: right;
              flex: 3;
            }
          }

          .apiList {
            height: 833px;
            background: rgba(0, 0, 0, 0.4);
            font-size: 20px;
            color: #00f9f9;
            overflow: auto;

            &::-webkit-scrollbar {
              width: 5px;
              height: 5px;
              background-color: rgba(0, 0, 0, 0);
              border-radius: 15px;
            }
            /*定义滚动条的轨道，内阴影及圆角*/
            &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
              border-radius: 0;
              background-color: rgba(0, 0, 0, 0);
              border-radius: 15px;
            }
            /*定义滑块，内阴影及圆角*/
            &::-webkit-scrollbar-thumb {
              /*width: 10px;*/
              /*height: 25px;*/
              -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.1);
              background-color: rgba(255, 255, 255, 0.1);
              border-radius: 15px;
            }

            .list {
              line-height: 80px;

              img {
                display: block;
                width: 50px;
                height: 43px;
              }

              li {
                flex: 2;
                text-align: center;
              }

              li:nth-child(1) {
                flex: 1.3;
                text-align: center;
              }

              li:nth-child(2) {
                text-align: center;
                flex: 2.5;
              }

              li:nth-child(3) {
                padding-right: 50px;
                text-align: right;
                flex: 3;
              }

              .assist {
                span {
                  display: inline-block;
                  text-align: center;
                  line-height: 45px;
                  width: 120px;
                  color: #fff;
                  background: #F5A623;
                  border-radius: 4.8px;
                  cursor: pointer;
                }

                .supported {
                  background: gray;
                  color: #fff;
                }
              }
            }
          }

          p {
            font-size: 16px;
            color: #fff;
            line-height: 55px;
          }
        }
      }
    }
  }

  .supportBack {
    // background: url('../../../assets/img/activity/apiTrade/flash.png') center center no-repeat;
    // background-size: 100% 100%;

    .support {
      width: 1260px;
      margin: 0 auto 0;

      .supportTitle {
        margin: 15px 0 50px 0;

        div {
          font-size: 42px;
          color: #00f9f9;
        }

        p {
          font-size: 16px;
        }
      }

      .supportCont {
        position: relative;
        width: 1080px;
        // height: 661px;
        padding: 30px 35px;
        margin: 0 auto;
        border: 2px solid #77F7FA;
        box-shadow: 0 0 9px 0 #77F7FA;
        border-radius: 15px;

        .default {
          position: absolute;
          bottom: 30px;
          left: 40px;
        }

        .shadowCont {
          // width: 1080px;
          // height: 601px;
          // background: #081723;
          // border: 1px solid #038c8d;
          // box-shadow: 0 2px 4px 0 #77f7fa;
          // border-radius: 6px;
          padding: 50px 180px;

          .supportCaption {
            font-size: 21px;
            color: #77f7fa;
            margin-bottom: 30px;

            li:nth-child(1) {
              flex: 1.2;
            }

            li:nth-child(2) {
              flex: 0.8;
            }
          }

          .supportList {
            // height: 320px;
            min-height: 320px;
            font-size: 24px;
            // overflow: auto;
            margin-bottom: 20px;

            &::-webkit-scrollbar {
              width: 5px;
              height: 5px;
              background-color: rgba(0, 0, 0, 0);
              border-radius: 15px;
            }
            /*定义滚动条的轨道，内阴影及圆角*/
            &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
              border-radius: 0;
              background-color: rgba(0, 0, 0, 0);
              border-radius: 15px;
            }
            /*定义滑块，内阴影及圆角*/
            &::-webkit-scrollbar-thumb {
              /*width: 10px;*/
              /*height: 25px;*/
              -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.1);
              background-color: rgba(255, 255, 255, 0.1);
              border-radius: 15px;
            }

            ul {
              line-height: 64px;

              li:nth-child(1) {
                flex: 1.2;
                .icon {
                  display: inline-block;
                  width: 45px;
                  height: 45px;
                  border-radius: 50%;
                  background: #fff;
                  margin-right: 5px;

                  img {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }
              }
              li:nth-child(2) {
                flex: 0.8;
              }
            }
          }

          .supportBtn {
            font-size: 21px;

            p {
              color: #77f7fa;
              margin-bottom: 40px;
            }

            span {
              padding: 12px 35px;
              background: #26ADFC;
              border-radius: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .tradePairsBack {
    .tradePairs {
      width: 1080px;
      margin: 160px auto 0;

      .tradePairsTitle {
        font-size: 42px;
        color: #00f9f9;
        margin-bottom: 55px;
      }

      .tradePairsCont {
        padding: 40px 15px 20px;
        border: 2px solid #77F7FA;
        box-shadow: 0 0 9px 0 #77F7FA;
        border-radius: 15px;

        .tradeBtn {
          p {
            font-size: 18px;
            margin: 30px 0 20px;
          }

          span {
            padding: 12px 35px;
            background: #26ADFC;
            border-radius: 10px;
            cursor: pointer;
            font-size: 21px;
          }
        }

        li {
          width: 49%;
          height: 165px;
          border-radius: 10px;
          padding: 1px;
          margin-bottom: 10px;

          .backBorder {
            width: 100%;
            height: 100%;
            padding: 22px 20px;
            border-radius: 10px;
            border: 1px solid #77F7FA;

            .symbol {
              font-size: 22px;

              .symbolIcon {
                display: inline-block;
                width: 45px;
                height: 45px;
                background: #fff;
                border-radius: 50%;
                margin-right: 14px;
              }
            }

            .cje {
              font-size: 16px;
            }

            .symbolWord {
              margin-top: 25px;

              p {
                width: 290px;
                height: 40px;
                line-height: 20px;
              }

              span {
                padding: 11px 19px;
                color: #fff;
                background: #F5A623;
                border-radius: 5px;
                cursor: pointer;
              }
            }
          }
        }

        li:nth-child(odd) {
          margin-right: 2%;
        }
      }
    }
  }

  .tradeProcessBack {
    background: url('../../../assets/img/activity/apiTrade/c.jpg') center center no-repeat;
    background-size: 100% 100%;

    .tradeProcess {
      width: 1080px;
      margin: 140px auto 0;

      .tradeProcessTitle {
        font-size: 42px;
        color: #00f9f9;
        margin-bottom: 55px;
      }

      .tradeProcessCont {
        width: 1080px;
        margin: 0 auto;
        border: 2px solid #77F7FA;
        box-shadow: 0 0 9px 0 #77F7FA;
        border-radius: 15px;
        padding: 20px 50px;

        & > div {
          margin-bottom: 30px;
        }

        .date {
          font-size: 28px;
          margin-bottom: 17px;
        }

        .title1 {
          font-size: 36px;
          color: #77f7fa;
          margin-bottom: 20px;
        }

        .main {
          padding: 30px;
          background: rgba(0, 0, 0, .4);

          .mainLeft {
            span {
              display: block;
            }

            span:nth-child(1) {
              font-size: 24px;
              color: #77f7fa;
              margin-bottom: 3px;
            }

            span:nth-child(2) {
              font-size: 18px;
            }
          }

          a {
            text-align: center;
            width: 133px;
            height: 42px;
            line-height: 42px;
            color: #fff;
            background: #F5A623;
            border-radius: 10px;
            cursor: pointer;
          }

          .mainRight {
            text-align: center;
            width: 133px;
            height: 42px;
            line-height: 42px;
            color: #fff;
            background: #F5A623;
            border-radius: 10px;
            cursor: pointer;

            a:hover {
              color: #fff;
            }
          }

          .rulesLeft {
            font-size: 21px;
            width: 15%;
          }

          .rulesRight {
            font-size: 18px;
            width: 85%;
          }
        }
      }

      .rulesCont {
        width: 1080px;
        min-height: 200px;
        margin: 0 auto;
        border: 2px solid #77F7FA;
        -webkit-box-shadow: 0 0 9px 0 #77F7FA;
        box-shadow: 0 0 9px 0 #77F7FA;
        border-radius: 15px;
        padding: 30px;
        background: rgba(0, 0, 0, .4);
        pre {
          word-wrap: break-word;
          white-space: pre-wrap;
        }
      }
    }
  }

  .bottomBack {
    background: url('../../../assets/img/activity/apiTrade/d.jpg') center center no-repeat;
    background-size: 100% 100%;
  }

  .shareBack {
    .share {
      width: 1080px;
      margin: 120px auto 0;

      .shareTitle {
        font-size: 42px;
        color: #00f9f9;
        margin-bottom: 44px;
      }

      .shareCont {
        padding: 20px 30px;
        border: 2px solid #77F7FA;
        -webkit-box-shadow: 0 0 9px 0 #77F7FA;
        box-shadow: 0 0 9px 0 #77F7FA;
        border-radius: 10px;

        p:nth-child(1) {
          color: #fff;
        }

        .copyUrl {
          padding: 20px;
          background: rgba(39, 108, 95, 0.2);
          border-radius: 10px;
          margin: 20px 0;
        }

        .shareBtn {
          span {
            display: inline-block;
            padding: 15px 48px;
            background: #26ADFC;
            border-radius: 10px;
            cursor: pointer;
          }

          span:nth-child(2) {
            margin-right: 20px;
          }
        }
      }
    }
  }

  .partnerBack {
    .partner {
      width: 1080px;
      margin: 100px auto 0;

      .partnerTitle {
        font-size: 42px;
        color: #00f9f9;
        margin-bottom: 38px;
      }

      .partnerCont {
        width: 100%;
        // box-shadow: inset 2px 0px 9px 5px #6afff8;
        // border-radius: 10px;
      }

      .partnerTop {
        margin-bottom: 96px;

        .partnerCont {
          div {
            width: 297px;
            height: 84px;
          }
        }
      }

      .partnerCenter, .partnerBottom {
        margin-bottom: 60px;

        .partnerCont {
          div {
            width: 19.6%;
            margin: 0 0.5% 5px 0;
            height: 57px;
          }

          div:nth-child(5n) {
            margin-right: 0;
          }
        }
      }
    }
  }

  .mediaPop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    color: #000;

    .mediaPopCont {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 900px;
      height: 500px;
      background: #fff;
      padding: 36px 40px;
      transform: translate(-50%, -50%);

      .closeBtn {
        position: absolute;
        top: -0;
        right: -40px;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
      }

      .cont1 {
        font-size: 21px;
        margin-bottom: 49px;

        .type1 {
          flex: 3;
          span:nth-child(1) {
            color: #4A90E2;
          }
        }

        .submitWordOrder {
          flex: 2;

          a {
            display: inline-block;
            font-size: 15px;
            padding: 9px 15px;
            border: 2px solid #26ADFC;
            border-radius: 5px;
            color: #26ADFC;
            cursor: pointer;
          }
        }

        .email {
          flex: 2;
        }
      }

      .mediaPopTitle {
        font-size: 30px;
        color: #4A90E2;
        margin-bottom: 36px;
      }

      .getSome {
        p {
          font-size: 24px;
          color: #4A90E2;
          margin: 47px 0 16px 0;
        }

        li {
          float: left;
          width: 50%;
          font-size: 20px;
          color: #3A3949;
          margin-bottom: 12px;
        }

        &.enClass {
          li {
            height: 40px;
          }
        }
      }

      .join {
        margin-top: 50px;

        span:nth-child(1) {
          font-size: 24px;
          color: #F5A623;
        }

        span:nth-child(2) {
          display: inline-block;
          padding: 12px 39px;
          background-image: linear-gradient(-180deg, #FAD961 0%, #F76B1C 100%);
          border-radius: 10px;
          font-size: 21px;
          color: #FFFFFF;
          cursor: pointer;
        }
      }
    }
  }

  .service {
    .mediaPopCont {
      padding: 20px;
      height: 700px;

      .el-form-item {
        margin-bottom: 10px;
      }

      .mediaPopTitle {
        margin-bottom: 10px;
      }

      .cont1 {
        margin-bottom: 10px;
        font-size: 18px;
      }

      .getSome {
        p {
          margin: 10px 0;
          font-size: 20px;
        }
        li {
          font-size: 16px;
        }

        &.enClass {
          li {
            height: 30px;
          }
        }
      }

      .formLine {
        // width: 48%;
        // display: inline-block;
      }
    }
  }
}

.btn {
  text-align: center;
  margin: 10px 0;

  .submitFormCont {
    width: 200px;
  }
}
.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

